<template>
	<MyPage title="生成海报" :isback="true">
		<view slot="gBody">
			<view class="view-box">
				<scroll-view scroll-x="true" class="template-scroll">
					<view class="template-scroll-view">
						<view class="template-list" v-for="(item, index) in templateList" :key="index">
							<image :src="item.src" mode="widthFix" />
							<view class="title">{{item.title}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="view-box">
				<u-form>
					<u-form-item label="总价格" label-width="220"><text slot="right"
							class="red font36">{{countPrice}}</text></u-form-item>
					<u-form-item label="是否优惠" label-width="220">
						<radio-group @change="radioChange" slot="right" class="radio-group">
							<label v-for="(item, index) in items" :key="item.value" class="label">
								<radio :value="item.value" :checked="index === current" color="#B00E0E" class="radio" />
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</u-form-item>
					<u-form-item :label="current==1?'上调金额':'优惠金额'" label-width="220" v-if="current==2||current==1">
						<u-input type="number" input-align="right" :placeholder="current==1?'请输入需要上调的金额':'请输入需要优惠的金额'"
							v-model="discountPrice" style="font-size:28rpx" />
					</u-form-item>
					<u-form-item label="生成海报格式" label-width="220">
						<radio-group @change="typeRadioChange" slot="right" class="radio-group">
							<label v-for="(item, index) in ['图片格式','PDF格式']" :key="index" class="label">
								<radio :value="String(index)" :checked="index==typeIndex" color="#B00E0E"
									class="radio" />
								<view>{{item}}</view>
							</label>
						</radio-group>
					</u-form-item>
				</u-form>
			</view>

			<view class="footer">
				<view class="footer-box">
					<view class="compute-box">
						<u-icon name="rmb" color="#bbb" size="40" class="margin-right10"></u-icon>
						<text class="red">{{footerPrice}}</text>
						最终报价
					</view>
					<view class="btn red-bg" @click="btnSubmit">立即生成</view>
				</view>
			</view>
		</view>
	</MyPage>
</template>

<script>
	import mixin from "@/libs/mixin.js";
	import {
		generatePicture,
		getPostimg,
	} from '@/api/compute.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				items: [{
						value: '0',
						name: '原价'
					},
					{
						value: '1',
						name: '上调',
						checked: 'true'
					},
					{
						value: '2',
						name: '优惠'
					},
				],
				info: {
					name: '王先生', //个人信息
					tel: '010-652415555',
					company: '百度科技公司', //公司信息
					logo: '已上传',
					url: 'www.baidu.com',
					address: '西北旺路软件园二期',
					//wechat:'', //联系信息
					autograph: '已上传',
					wechatCode: '无',
					alipayCode: '已上传',
					tiktokCode: '无',
					blogCode: '无'
				},
				templateList: [{
					id: 1,
					src: '/static/images/template1.jpg',
					title: '默认'
				}],
				switchVal: false,
				current: 0,
				countPrice: 0,
				discountPrice: '',
				endPrice: 0,
				typeIndex: 0,
				okObj: {}
			}
		},
		computed: {
			footerPrice() {
				return this.current == 0 ? Number(this.countPrice) : (this.current == 1 ? Number(this.countPrice) + Number(
					this.discountPrice) : Number(this.countPrice) - Number(this.discountPrice))
			}
		},
		onLoad(option) {
			uni.getStorage({
				key: 'okObj',
				success: (res) => {
					console.log(res.data);
					this.okObj = res.data;
				}
			});
			//获取路由参数
			this.ids = option.ids ? option.ids : '';
			this.cycle = option.cycle ? option.cycle : '';

			this.cityKey = option.cityKey ? option.cityKey : '';
			this.countPrice = option.zongjia ? option.zongjia : '';
			this.endPrice = this.countPrice;
			this.wtf = option.wtf;
			this.is_shebao_money = option.is_shebao_money;
			this.shebao_month = option.shebao_month;
			this.shebao_num = option.shebao_num;
			this.is_performance = option.is_performance;
			this.performance_money = option.performance_money;
			this.performance_num = option.performance_num;
			this.is_extend = option.is_extend;
			this.extend_name = option.extend_name;
			this.extend_content = option.extend_content;
			this.extend_money = option.extend_money;
			this.extend_num = option.extend_num;
		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			// 生成海报格式-单选
			typeRadioChange(obj) {
				this.typeIndex = obj.detail.value;
			},
			// 生成图片
			btnSubmit() {

				var lists = uni.getStorageSync('lists');
				var zizi = uni.getStorageSync('zizi');
				var okObj = uni.getStorageSync('okObj');

				if (this.current != 0 && !this.discountPrice) {
					uni.showToast({
						title: '请输入调整的金额！',
						icon: 'none'
					});
					return false;
				};
				if (Number(this.footerPrice) < 0) {
					uni.showToast({
						title: '总价格有误，请您核对优惠的价格！',
						icon: 'none'
					});
					return false;
				};
				uni.showLoading({
					title: '正在生成海报，请稍候！',
					mask: true
				});
				console.log("22: " + JSON.stringify(lists));

				uni.request({
					url: 'http://baice.gov580.com/api.php?app=Default&act=getbaojianews', //仅为示例，并非真实接口地址。
					data: {
						ids: this.ids,
						shijian: this.cycle,
						cycle: this.cycle,
						city: this.cityKey,
						data:  JSON.stringify(okObj),
						discountPrice: this.discountPrice,
						pricetype: this.current,
						typeIndex: this.typeIndex,
						token: this.$store.state.app.token,
						wtf: this.wtf,
						lists: JSON.stringify(lists),
						zizi:   JSON.stringify(zizi),
						is_shebao_money: this.is_shebao_money,
						shebao_month: this.shebao_month,
						shebao_num: this.shebao_num,
						is_performance: this.is_performance,
						performance_money: this.performance_money,
						performance_num: this.performance_num,
						is_extend: this.is_extend,
						extend_name: this.extend_name,
						extend_content: this.extend_content,
						extend_money: this.extend_money,
						extend_num: this.extend_num,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					timeout: 30000,
					method: 'POST',
					dataType: 'json',
					success: (res) => {
						console.log(": " + JSON.stringify(res));
						uni.hideLoading();
						this.saveImg(res.data.list.imgname);

					}
				});
				return

				getPostimg({
					ids: this.ids,
					shijian: this.cycle,
					cycle: this.cycle,
					city: this.cityKey,
					data: this.okObj,
					discountPrice: this.discountPrice,
					pricetype: this.current,
					typeIndex: this.typeIndex,
					token: this.$store.state.app.token,
					wtf: this.wtf,
					lists: lists,
					zizi: zizi,
					is_shebao_money: this.is_shebao_money,
					shebao_month: this.shebao_month,
					shebao_num: this.shebao_num,
					is_performance: this.is_performance,
					performance_money: this.performance_money,
					performance_num: this.performance_num,
					is_extend: this.is_extend,
					extend_name: this.extend_name,
					extend_content: this.extend_content,
					extend_money: this.extend_money,
					extend_num: this.extend_num,

				}).then(res => {
					this.saveImg(res.list.imgname);
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
					uni.hideLoading();
				});
			},
			// 保存图片
			saveImg(imgname) {
				const that = this;
				console.log(imgname)
				uni.downloadFile({
					url: imgname,
					success: res => {
						if (res.statusCode == 200) {
							if (this.typeIndex == 1) {
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: function(res) {
										//res.savedFilePath文件的保存路径 
										uni.openDocument({
											filePath: res.savedFilePath,
											success: (res) => console.log('成功打开文档')
										})
										console.log("bbb", res);
										/*
								   uni.showToast({
								   	title: '已保存到手机',
								   	icon:'none'
								   })*/
									},
									fail() {
										uni.showToast({
											title: '保存失败，请稍后重试',
											icon: 'none'
										})
									}
								})
							} else {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: '已保存到相册',
											icon: 'none'
										})
									},
									fail: function() {
										uni.showToast({
											title: '保存失败，请稍后重试',
											icon: 'none'
										})
									}
								});
							}
						} else {
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							})
						}
					},
					complete: res => {
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}
</style>
<style lang="scss" scoped>
	.view-box {
		margin-top: 15rpx;
		background: #fff;
		padding: 10rpx 40rpx;
		border-radius: 10rpx;

		.box-title {
			padding: 15rpx 0 3rpx;

			.title-text {
				font-size: 30rpx;
			}
		}
	}

	.template-scroll {
		width: 100%;
		padding: 20rpx 15rpx;
		height: 380rpx;

		.template-scroll-view {
			white-space: nowrap;

			.template-list {
				float: left;
				text-align: center;
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 330rpx;
					border: 1px #B00E0E solid;
					border-radius: 10rpx;
				}

				.title {
					font-size: 24rpx;
					color: #B00E0E;
				}
			}
		}
	}

	.radio-group {
		white-space: nowrap;
		display: flex;

		.label {
			display: flex;
			align-items: center;
			margin-left: 18rpx;

			.radio {
				transform: scale(0.7);
			}
		}
	}

	.footer {
		width: 100%;
		height: 100rpx;

		.footer-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background: #fff;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, .2);
			display: flex;
			justify-content: space-between;

			.compute-box {
				padding: 18rpx 0 0 30rpx;

				.red {
					margin: 0 10rpx;
					font-size: 45rpx;
				}
			}

			.btn {
				width: 210rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 30rpx;
			}
		}
	}
</style>